import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import {
  HeaderWrapper,
  Logo,
  Nav,
  NavItem,
  NavSearch,
  Addition,
  ButtonTitle,
  Recommend,
  RecommendTitle,
  RecommendIcon,
  RecommendList,
  RecommendItem
} from './style';
import { actionCreaters } from './store'

class Header extends Component {
  constructor(props) {
    super(props)
    this.state = {
      focus: false
    };
  }
  render() {
    return (
      <div>
        <HeaderWrapper>
          <Link to="/"><Logo /></Link>
          <Nav>
            <NavItem className='left active'>首页</NavItem>
            <NavItem className='left'>下载App</NavItem>
            <NavItem className='right login'>登陆</NavItem>
            <NavItem className='right aa'>Aa</NavItem>
            <NavSearch
              onFocus={this.props.handleInputFocus}
              onBlur={this.props.handleInputBlur}
              className={this.props.focus ? 'focused' : ''}
            ></NavSearch>
            <Addition>
              <ButtonTitle className='write'>写文章</ButtonTitle>
              <ButtonTitle>注册</ButtonTitle>
            </Addition>
            {
              this.getRecommend()
            }
          </Nav>
        </HeaderWrapper>
      </div>
    );
  }

  getRecommend() {
    const {list,page,totalPage,handleMouseEnter,handleMouseLeave,mouseIn,focus,handlePageClick} = this.props
    const pageList = []
    const newList = list.toJS()
    for (let i = page*10; i<(page+1)*10 ; i ++) {
      if (newList[i]) {
        pageList.push(
          <RecommendItem key={i}>{newList[i]}</RecommendItem>
        )
      }
    }
    if (focus || mouseIn) {
      return (
        <Recommend
          onMouseEnter={handleMouseEnter}
          onMouseLeave={handleMouseLeave}
        >
          <RecommendTitle>热门搜索
            <RecommendIcon
              onClick={() => {handlePageClick(page,totalPage)}}
            >换一批</RecommendIcon>
          </RecommendTitle>
          <RecommendList>
            {pageList}
          </RecommendList>
        </Recommend>
      )
    } else {
      return null
    }
  }
}

const mapState = (state) => {
  return {
    focus: state.getIn(['header','focus']),
    list: state.getIn(['header','list']),
    page: state.getIn(['header','page']),
    mouseIn: state.getIn(['header','mouseIn']),
    totalPage: state.getIn(['header','totalPage']),
  }
}
const mapDispatch = (dispatch) => {
  return {
    handleInputFocus() {
      dispatch(actionCreaters.getList())
      dispatch(actionCreaters.changeFocus())
    },
    handleInputBlur() {
      dispatch(actionCreaters.changeBlur())
    },
    handleMouseEnter() {
      dispatch(actionCreaters.mouseEnter())
    },
    handleMouseLeave() {
      dispatch(actionCreaters.mouseLeave())
    },
    handlePageClick(page,totalPage) {
      if (page === totalPage - 1) {
        dispatch(actionCreaters.clickPage(0))
      } else {
        dispatch(actionCreaters.clickPage(page + 1))
      }
    },
  }
}
export default connect(mapState, mapDispatch)(Header);
